<template>
    <div class="list">
        <div class="header">
          <router-link style="margin-right:1rem;color: black;" :to="{ name:'UserCenterCG'}">
            <van-icon name="arrow-left" size="1.3rem"/>
          </router-link>
          <h3>个人信息</h3>
        </div>

        <div class="wanshan">
          <h4>完善以下信息可获得100积分</h4>
        </div>

        <div class="banner">
          <h4>头像</h4>
          <van-uploader class="teshu" :after-read="onRead" accept="image/gif, image/jpeg">
            <van-icon name="manager-o" size="1.6rem"/>
          </van-uploader>
        </div>

        <div class="banner">
          <h4>昵称</h4>
          <h5>{{userName}}</h5>
          <router-link class="teshu" :to="{ name:'NickName'}">
            <van-icon name="arrow" size="1.3rem"/>
          </router-link>
        </div>

        <div class="banner" @click="show=!show">
          <h4>性别</h4>
          <h5>{{selGender}}</h5>
         <router-link class="teshu" :to="{ name:''}">
            <van-icon name="arrow" size="1.3rem"/>
         </router-link>

          <van-popup v-model="show" position="bottom" :overlay="false" open>
            <van-picker
              confirm
              :columns="columns"
              :default-index="2"
              @change="onChange"
            />
          </van-popup>
        </div>

        <div class="banner" @click="show4=!show4">
          <h4>生日</h4>
          <h5>{{shengRi}}</h5>
          <router-link class="teshu" :to="{ name:''}">
            <van-icon name="arrow" size="1.3rem"/>
          </router-link>

          <van-picker
            :columns="columns4"
            @change="onChange"
          />
        </div>

        <div class="banner" @click="show2=!show2">
          <h4>情感状态</h4>
          <h5>{{qingGan}}</h5>
          <router-link class="teshu" :to="{ name:''}">
            <van-icon name="arrow" size="1.3rem"/>
          </router-link>

          <van-popup v-model="show2" position="bottom" :overlay="false" open>
            <van-picker
              confirm
              :columns="columns2"
              :default-index="2"
              @change="onChange2"
            />
          </van-popup>
        </div>

        <div class="banner" @click="show3=!show3">
          <h4>家有宝贝</h4>
          <h5>{{baBy}}</h5>
          <router-link class="teshu" :to="{ name:''}">
            <van-icon name="arrow" size="1.3rem"/>
          </router-link>

          <van-popup v-model="show3" position="bottom" :overlay="false" open>
            <van-picker
              confirm
              :columns="columns3"
              :default-index="2"
              @change="onChange3"
            />
          </van-popup>
        </div>

        <div class="banner">
          <h4>绑定手机号</h4>
          <router-link class="teshu" :to="{ name:'UserCenter'}">
            <van-icon name="arrow" size="1.3rem"/>
          </router-link>
        </div>

        <div class="banner">
          <h4>添加感兴趣的商品类</h4>
        </div>

        <div class="end">
          <router-link class="end" :to="{ name:'UserCenter'}">
            <h4 style="color:black;">退出</h4>
          </router-link>
        </div>
    </div>
</template>

<script>
//import {get} from 'axios'
const citys = {
  '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
  '福建': ['福州', '厦门', '莆田', '三明', '泉州']
};

export default {
  data(){
    return{
      userName:'',
      value:'',
      values:'',
      key:'',
      show: false,
      show2: false,
      show3: false,
      show4: false,
      columns: ['女','男','取消'],
      columns2: ['未婚','已婚','取消'],
      columns3: ['有','没有','取消'],
      columns4:[
        {
        values: Object.keys(citys),
        className: 'column1'
      },{
        values: citys[''],
        className: 'column2',
        defaultIndex: 2
      },
      ],
      selGender: '女',
      qingGan:'已婚',
      baBy:'有',
      shengRi:'浙江'
    }
  },
  methods: {
    onRead(file) {
      console.log(file)
    },
    onChange(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
      this.selGender = value
    },
    onChange2(picker, value, index) {
      this.qingGan = value
    },
    onChange3(picker, value, index) {
      this.baBy = value
    },
    onChange(picker, values) {
      //picker.setColumnValues(1, citys[values[0]]);
      this.shengRi = values
     
    }
  },
  created(){
    this.userName=localStorage.getItem('userName')
  },
}
</script>

<style scoped>
  *{
    margin: 0;padding: 0;
  }
  .header{
    width: 100%;
    height: 4rem;
    line-height:4rem;
    background-color: #fff;
  }
  .header .van-icon{
    margin: 1rem;
  }
  .header h3{
    float: right;
    margin-right:42%;
  }
  .wanshan{
    height: 2.5rem;
    line-height:2.5rem;
    background-color:#ffe7c3;
    padding: 0.5rem 1rem;
    color:#ffa614;
  }
  .banner{
    height: 3rem;
    line-height:3rem;
    background-color:#fff;
    border-bottom: 1px solid #ececec;
    padding: 0.5rem 1rem;
  }
  .banner h4{
    float: left;
    width: 30%;
    line-height:3rem;
  }
  .banner h5{
    float: left;
    width: 50%;
    line-height:3rem;
    text-align: right;
    margin-left: 2rem;
  }
  .van-uploader{
    text-align:center;
    width: 3rem;
    height: 3rem;
    line-height: 3.5rem;
    border: 1px solid #ececec;
    border-radius: 50%;
  }
  .teshu{
    color: black;
    float:right;
  }

  .end{
    text-align: center;
    height:3rem;
    line-height: 3rem;
    background-color: #fff;
    margin-top: 2rem;
  }
  


</style>
<style>
  .van-popup--bottom{
    float: left;
    width: 100% !important;
    height: 25% !important;
  }
  .van-picker{
    float: left;
    width: 100% !important;
    height: 65% !important;
  }
  .van-picker__columns{
    float: left;
    width: 100% !important;
    height: 45%;
  }
</style>

